import vue from '@vitejs/plugin-vue';
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite'; // 自动按需导入API，如axios、dayjs、mockjs等
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
import IconsResolver from 'unplugin-icons/resolver';
import Icons from 'unplugin-icons/vite'; // 常用图标库vue-icons地址：https://vue-icons.com/icons/
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite'; // 自动按需导入工具，自动导入第三方库或组件
import { defineConfig, loadEnv } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';

const pathSrc = path.resolve(__dirname, 'src');
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), ['VITE', 'ENV']);
  console.log(env);
  return {
    base: './',
    mode: process.env.NODE_ENV,
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/scss/variables.scss" as *;`,
          api: 'modern-compiler'
        }
      }
    },
    build: {
      outDir: 'dist',
      assetsDir: 'static',
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      },
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        }
      }
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '^': path.resolve(__dirname, 'public')
      }
    },
    plugins: [
      vue({
        script: {
          defineModel: true
        }
      }),
      eslintPlugin({
        include: [
          'src/**/*.js',
          'src/*.js',
          'src/*.ts',
          'src/**/*.ts',
          'src/**/*.d.ts',
          'src/**/*.vue',
          'src/typings/**/*.d.ts',
          'src/*.vue'
        ]
      }),
      AutoImport({
        imports: [
          'vue',
          'vue-router',
          'pinia',
          {
            axios: [['default', 'axios']],
            dayjs: ['dayjs'],
            mockjs: ['Mock'],
            'pinyin-pro': ['pinyin'],
            'vue-draggable-plus': ['VueDraggable']
          }
        ],
        // 自定义解析器，兼容 `unplugin-vue-components`
        resolvers: [
          ElementPlusResolver(),
          IconsResolver({
            prefix: 'Icon'
          })
        ],
        dts: path.resolve(pathSrc, 'typings/auto-imports.d.ts')
      }),
      Components({
        dirs: ['src/components'],
        // 自定义组件解析器
        resolvers: [
          ElementPlusResolver(),
          // {prefix}-{collection}-{icon} 使用组件解析器时，您必须遵循名称转换才能正确推断图标，亦可使用大驼峰命名：<IconAsFold class="v-icon" />
          IconsResolver({
            prefix: 'icon', // 自动引入的Icon组件统一前缀，默认为 i，设置false为不需要前缀
            //enabledCollections: ['ep'], // 启用指定的图标集合，这是可选的，默认启用 Iconify 支持的所有集合['mdi']，但是体积会增大不少
            customCollections: ['as'] // 定义自定义图标集合
          })
        ],
        dts: path.resolve(pathSrc, 'typings/components.d.ts')
      }),
      // 自动引入和使用图标组件，便捷地在不同框架中按需接入成千上万的图标
      Icons({
        scale: 1,
        compiler: 'vue3',
        autoInstall: true,
        // 自定义图标集合
        customCollections: {
          as: FileSystemIconLoader(path.resolve(__dirname, './src/assets/svg'), (svg) => svg.replace(/^<svg/, '<svg fill="currentColor"'))
        }
      })
    ],
    server: {
      host: '0.0.0.0',
      port: 8080,
      open: true,
      cors: true,
      hmr: {
        overlay: false
      },
      logLevel: 'info',
      proxy: {
        '/manage/api/': {
          target: 'http://192.168.66.226',
          changeOrigin: true
        }
      }
    }
  };
});
